<template>
  <vue-crop  @crop-upload-success="uploadSuccess"
             v-model="show"
             :width="width"
             :height="height"
             :url="uploadurl"
             :field="fileName"
             img-format="png"></vue-crop>
</template>

<script>
import VueCrop from 'vue-image-crop-upload/upload-2.vue'
export default{
  props: {
    value: {
      type: Boolean
    },
    width: {
      type: Number,
      default: 200
    },
    height: {
      type: Number,
      default: 200
    },
    /* 上传图片的地址 */
    uploadurl: {
      type: String
    },
    /* 上传图片的file控件name */
    fileName: {
      type: String
    }
  },
  data () {
    return {
      show: false
    }
  },
  mounted () {
    this.show = this.value
  },
  components: {
    VueCrop
  },
  methods: {
    uploadSuccess (res, field) {
      this.$emit('uploadSuccess', res)
    }
  },
  watch: {
    value (newv) {
      this.show = newv
    },
    show (newv) {
      if (!this.show) {
        this.$emit('input', false)
      }
    }
  }
}
</script>

<style></style>
